<template>
<div id="Address">
<NavBar>
  <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center">编辑收货地址</div>
</NavBar>
  <div>
    <van-address-edit
  :area-list="areaList"
  show-delete
  show-postal
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"

>
      <div>

  <van-cell-group>
<div class="tag">
  <span class="tag_is">标签</span>
  <div class="tag_items">
    <ul>
    <li @click="clicktag(0)" >  <van-tag round type="primary" :class="{active:tagIndex===0}" plain id="item1"  @click="title_change('家')" >家</van-tag></li>
    <li @click="clicktag(1)" > <van-tag round type="primary" :class="{active:tagIndex===1}" plain id="item2" @click="title_change('公司')">公司</van-tag></li>
    <li @click="clicktag(2)" > <van-tag round type="primary" :class="{active:tagIndex===2}" plain id="item3"  @click="title_change('学校')">学校</van-tag></li>
  </ul>


<!--    <div v-if="tagshow"> <van-tag round type="primary" plain id="item4">+</van-tag>-->
<!--&lt;!&ndash;      <van-icon name="plus" /></van-tag>&ndash;&gt;-->
<!--    </div>-->
<!--    <div v-else><div is="sure"><input type="text"><button>确定</button></div></div>-->
    </div>
</div>
</van-cell-group>
        </div>
    </van-address-edit>


  </div>
</div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import { areaList } from '@vant/area-data';
export default {
name: "address",
  components:{NavBar},
   data() {
    return {
      areaList,
      searchResult: [],
      title:'',
      show:true,
      tagshow:false,
      tagIndex:0,
      color:''
    };
  },
  methods: {
  clicktag(index){
    this.tagIndex =index
    console.log(index)
    console.log(this.tagIndex)
  },
  return_before(){
    history.go(-1)
  },
    onSave(aaa) {
      // this.$toast.success('成功保存')
      console.log(aaa.city);
      this.show=!this.show
    },
    onDelete() {
        this.$toast.success('成功删除')
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            // name: '黄龙万科中心',
            // address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    title_change(title){
      this.title=title
      // console.log(title);
      // console.log(this.title)
    }
  },

}
</script>

<style scoped>
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
#Address{
  background-color: rgb(247,248,250);
  height: 1000px;
}
#tag{
  height: 200px;

  background-color: pink;
}
.try{

  height: 100px;
text-align: center;
padding-top: 35px;
}
html body.van-overflow-hidden div#app div#address div div.van-dialog div.van-dialog__content div.try div.van-cell-group.van-cell-group--inset.van-hairline--top-bottom{
    padding-bottom: 59px;
    position: relative;
    top: -11px;

}
.try .van-cell-group{
      padding-bottom: 59px;
    position: relative;
    top: -11px;
}
.tag{
  height: 70px;
}
.tag_is{
  position: relative;
top: 10px;
left: 17px;
font-size: 14px;
}
.tag_items{
  margin-left: 83px;
margin-top: -7px;
}
#item1{
  width: 50px;
display: block;
text-align: center;
/*position: absolute;*/
    color: gray;
}
#item2{
  width: 50px;
display: block;
text-align: center;
/*position: absolute;*/
/*  left: 142px;*/
    color: gray;
}
#item3{
  width: 50px;
display: block;
text-align: center;
/*position: absolute;*/
/*  left: 204px;*/
  color: gray;
}
#item4{
  width: 50px;
display: block;
text-align: center;
position: absolute;
  top: 39px;
  color: gray;
}
#sure{

    position: absolute;
    top: 35px;
    width: 173px;
    height: 17px;
    border-radius: 10px 10px 10px 10px;
    border: none;

}
.active{
  background-color: skyblue;
  color: white!important;
}
ul li {
  width: 55px;
height: 20px;
}
ul li:nth-child(2){

    position: relative;
    top: -20px;
    left: 59px;

}
ul li:nth-child(3){

    position: relative;
    top: -40px;
    left: 118px;

}
</style>